class TabSwitch{
 	constructor(str){
 		this.parent = document.querySelector(str)
 		this.aBtn =this.parent.querySelectorAll('.btnBox input');
		this.aLi = this.parent.querySelectorAll('ul li');
		this.aleft = this.parent.querySelector('.left')
		this.aright = this.parent.querySelector('.right')
		this.show();
 	}
 	show(){
 		let _this = this;
 		for(let i = 0;i<this.aBtn.length;i++){
 			this.aBtn[i].onclick = function(){
 				_this.fn(i);
 			}
 		}
 	}
 	fn(i){
 		for(var j = 0;j<this.aLi.length;j++){
 			this.aBtn[j].className = '';
 			this.aLi[j].className = '';
 		}
 		this.aLi[i].className = 'show';
 		this.aBtn[i].className = 'active'
 	}
 }
 //自动播放
 //继承
 class TabSwitch2 extends TabSwitch{
 	constructor(str){
 		super(str);
 		this.autoFn();
 		this.index = 0
 	}
 	autoFn(){
 		var _this  = this;
 		setInterval(function(){
 			_this.index++;
 			if(_this.index == _this.aBtn.length){
 				_this.index = 0;
 			}
 			_this.fn(_this.index)
 		},1500)
 	}
 }
 class TabSwitch3 extends TabSwitch{
 	constructor(str){
 		super(str)
		this.index = 0;
 		this.zidong();
 	}
 	zidong(){
 		let _this = this;
 		_this.aleft.onclick = function(){
 			_this.left()
 		}
 		_this.aright.onclick = function(){
 			_this.right()
 		}		 		
 	}
 	left(){
		var _this = this;
		_this.index--;
		if(_this.index==-1){
			_this.index=_this.aBtn.length-1;
		}
		_this.fn(_this.index)
	}
 	right(){
 		var _this = this;
		_this.index++;
		if(_this.index==_this.aBtn.length){
			_this.index=0;
		}
		_this.fn(_this.index)
 	}
 	
 }
 window.onload = function(){
 	new TabSwitch('#box1')
 	new TabSwitch2('#box2')
 	new TabSwitch3('#box3')
 }